<template>
    <div>
        <div class="booo">
            <div class="nu" v-if="one == undefined">

            </div>
            <div class="nubone" v-else>
                <img src="@/assets/1.png" alt="" class="yi">
                <div class="photou">
                    <img :src="one.avatar" alt="">
                </div>
                <img src="@/assets/jin.png" alt="" class="jin">
                <div class="name_one">
                    <div>
                        {{ one.nickname }}
                    </div>
                    <div>
                        {{ one.dept }}
                    </div>
                </div>
                <div class="fenshu">
                    {{ one.point }}
                </div>
            </div>
            <div style="display: flex;">
                <div class="nu" v-if="two == undefined">

                </div>
                <div class="nubtwo" v-else>
                    <img src="@/assets/2.png" alt="" class="yi">
                    <div class="photou">
                        <img :src="two.avatar" alt="">
                    </div>
                    <img src="@/assets/yin.png" alt="" class="jin">
                    <div class="name_one">
                        <div>
                            {{ two.nickname }}
                        </div>
                        <div>
                            {{ two.dept }}
                        </div>
                    </div>
                    <div class="fenshu">
                        {{ two.point }}
                    </div>
                </div>
                <div class="nu" v-if="three == undefined">

                </div>
                <div class="nubthree" v-else>
                    <img src="@/assets/3.png" alt="" class="yi">
                    <div class="photou">
                        <img :src="three.avatar" alt="">
                    </div>
                    <img src="@/assets/tong.png" alt="" class="jin">
                    <div class="name_one">
                        <div>
                            {{ three.nickname }}
                        </div>
                        <div>
                            {{ three.dept }}
                        </div>
                    </div>
                    <div class="fenshu">
                        {{ three.point }}
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div class="benren">
                <div class="oendiv">
                    {{ member_pointList.exam == 0 ? "未到排行榜" : member_pointList.answer }}
                </div>
                <div class="ben">
                    <div class="tutext">
                        <img :src="member_pointList.avatar" alt="">
                    </div>
                    <div>
                        {{ member_pointList.nickname }}
                    </div>
                    <div class="ren">
                        本人
                    </div>
                </div>
                <div class="threediv">
                    {{ member_pointList.dept }}
                </div>
                <div>
                    {{ member_pointList.exam }}
                </div>
            </div>
            <div>
                <el-table :data="answerList" style="width: 100%;height: 470px;  ">
                    <el-table-column type="index" label="排名" width="200px" align="center">
                        <template #default="scope">
                            <!-- {{ (datas.page - 1) * datas.page_size + scope.$index + 4 }} -->
                        </template>
                    </el-table-column>
                    <el-table-column label="姓名" width="200px" align="center">

                        <template #default="scope">
                            <div style="display: flex; align-items: center;">
                                <div class="tutext">
                                    <img :src="scope.row.avatar" alt="" class="dui">
                                </div>
                                <div style="margin-left: 5px;">
                                    <span>{{ scope.row.nickname }}</span>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="dept" width="200px" label="党支部" align="center" />
                    <el-table-column prop="point" width="160px" label="积分" align="center" />
                </el-table>
                <p style="text-align: center;margin: 10px 0;color: #767676;">仅展示前50名</p>
                <div class="con_bomtab">
                    <div class="cc">共{{ total }}条</div>
                    <el-pagination v-model:page-size="pageSize" background layout="prev, pager, next" :total="total"
                        @next-click="nextclick" @prev-click="prevclick" @change="change1" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { answer, member_point } from '@/api/team'
let total = ref(10)
//获取排行榜数据
let answerList: any = ref()
let one: any = ref({
    avatar: "",
    dept: "",
    nickname: "",
    point: "",
    user_id: ""
})
let two: any = ref({
    avatar: "",
    dept: "",
    nickname: "",
    point: "",
    user_id: ""
})
let three: any = ref({
    avatar: "",
    dept: "",
    nickname: "",
    point: "",
    user_id: ""
})
let member_pointList: any = ref({
    age: '',
    answer: '',
    avatar: "",
    dept: "",
    dept_id: '',
    exam: '',
    id: '',
    matrix: '',
    network: '',
    nickname: "",
    point: '',
    todo: '',
    video: ''
})
let data = ref({
    page: 1,
    page_size: 3
})
let datas = ref({
    page: 1,
    page_size: 6
})
const hpanswer = () => {
    answer(data.value).then(res => {
        console.log(res.data.data.data, 'pai')
        one.value = res.data.data.data[0]
        two.value = res.data.data.data[1]
        three.value = res.data.data.data[2]
    })
}
hpanswer()
const ddd = () => {
    answer(datas.value).then(res => {
        console.log(res.data.data.data, 'pai')
        answerList.value = res.data.data.data
        // answerList.value = res.data.data.data.slice(3)
        total.value = res.data.data.total
    })
}
ddd()

const member_pointbr = () => {
    member_point().then(res => {
        console.log(res.data.data, 'sss')
        member_pointList.value = res.data.data
    })
}
member_pointbr()
const pageSize = ref(6)
const nextclick = async () => {
    datas.value.page++
    // answerList.value.slice(3, 5);
}
const prevclick = async () => {
    datas.value.page--
    ddd()
}
const change1 = async (e: any) => {
    datas.value.page = e
    ddd()
}
</script>

<style lang="scss" scoped>
.benren {
    width: 100%;
    height: 64px;
    background: #f6a1a165;
    display: flex;
    // justify-content: space-around;
    line-height: 64px;

    div {
        // width: 25%;
        text-align: center;
    }

    .ben {
        display: flex;
        width: 340px;
        justify-content: center;

        img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin: 8px 8px;
        }

        .ren {
            width: 48px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            color: #fff;
            background: #E02020;
            border-radius: 20px;
            margin: 23px 0;
            margin-left: 10px;
        }
    }


}

.oendiv {
    width: 110px;
    // background: olive;
    text-align: right !important;
}

.threediv {
    width: 220px;
    // background: olive;
    text-align: left !important;
}

.ersan {
    display: flex;
    justify-content: space-between;
}

.fenshu {
    text-align: center;
    margin-top: 24px;
    font-weight: 600;
    color: #E02020;
}

.name_one {
    display: flex;
    justify-content: space-around;
    font-weight: 600;

    div {
        margin-top: 102px;
    }
}

.nubone {
    width: 300px;
    height: 200px;
    background-image: url('@/assets/nubone.png');
    background-size: 100%;
    background-repeat: no-repeat;
    margin: 36px auto;
    position: relative;
}

.nubtwo {
    width: 300px;
    height: 200px;
    background-image: url('@/assets/nubtwo.png');
    background-size: 100%;
    background-repeat: no-repeat;
    margin: 36px auto;
    position: relative;
}

.nubthree {
    width: 300px;
    height: 200px;
    background-image: url('@/assets/nubthree.png');
    background-size: 100%;
    background-repeat: no-repeat;
    margin: 36px auto;
    position: relative;
}

.yi {
    width: 39px;
    height: 64px;
    position: absolute;
    right: 30px;
    top: 10px;
}

.photou {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    position: absolute;
    top: -19px;
    left: 110px;

    img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }
}

.jin {
    width: 40px;
    height: 40px;
    position: absolute;
    left: 155px;
    top: 25px;
}

.booo:nth-child(2) {
    display: flex;
    justify-content: space-around;
}

.dui {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    // margin-right: 10px;
}

.nu {
    width: 300px;
    height: 200px;
}

.tutext {
    margin-left: 5px;
    margin-right: 5px;
}

.con_bomtab {
    // position: absolute;
    // bottom: 10px;
    // left: 35%;
    display: flex;
    justify-content: center;
    // transform: translateX(-50%);
    margin-top: 20px;

    .cc {
        width: 100px;
        margin-top: 8px;
        text-align: center;
    }
}
</style>